<template>
  <a-modal
    :title="formConfig.title"
    :visible="visible"
    @cancel="visible = false"
    @ok="submit()"
    width="600px"
    :mask-closable="false"
    :keyboard="false"
    :confirmLoading="confirmLoading"
  >
    <a-form :form="form">
      <template v-for="(item, index) in formConfig.items">
        <!--隐藏域控件-->
        <a-form-item v-if="item.type === 'hidden'" v-show="false" :key="index">
          <a-input v-decorator="[item.name]" type="hidden"></a-input>
        </a-form-item>
        <!--非隐藏域表单控件-->
        <a-form-item
          v-else
          v-bind="layout"
          :key="index"
          :label="item.label"
          :help="item.help"
        >
          <!--根据type来显示是控件-->
          <a-input
            v-if="item.type === 'input'"
            v-decorator="[
              item.name,
              {
                rules: item.rules,
              },
            ]"
            :placeholder="item.placeholder || `请输入${item.label}`"
            :disabled="item.disabled"
            allow-clear
          ></a-input>
          <a-input
            v-if="item.type === 'password'"
            v-decorator="[
              item.name,
              {
                rules: item.rules,
              },
            ]"
            :placeholder="item.placeholder || `请输入${item.label}`"
            has-feedback
            type="password"
          ></a-input>
          <a-select
            v-else-if="item.type === 'select'"
            :mode="item.mode"
            v-decorator="[
              item.name,
              {
                rules: item.rules,
              },
            ]"
            :placeholder="item.placeholder || `请选择${item.label}`"
            :disabled="item.disabled"
            :initialValue="item.initialValue"
          >
            <a-select-option
              v-for="item in item.options"
              :key="item.value"
              :value="item.value"
              :dropdownMatchSelectWidth="false"
              >{{ item.label }}</a-select-option
            >
          </a-select>
          <a-tree-select
            v-else-if="item.type === 'tree_select'"
            v-decorator="[
              item.name,
              {
                rules: item.rules,
              },
            ]"
            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
            :search-placeholder="'请选择' + item.label"
            :tree-data="item.options"
            :replaceFields="item.replaceFields"
          />
          <a-input-number
            v-else-if="item.type === 'number'"
            v-decorator="[
              item.name,
              {
                rules: item.rules,
              },
            ]"
            :placeholder="item.placeholder || `请输入${item.label}`"
            :disabled="item.disabled"
            :min="item.min"
            :max="item.max"
          />
          <a-date-picker
            v-else-if="item.type === 'datetime'"
            v-decorator="[
              item.name,
              {
                rules: item.rules,
              },
            ]"
            :placeholder="item.placeholder || `请选择${item.label}`"
            :disabled="item.disabled"
            :disabledDate="item.disabledDate"
          />
          <a-range-picker
            v-else-if="item.type === 'datetimeRange'"
            v-decorator="[
              item.name,
              {
                rules: item.rules,
              },
            ]"
            :disabled="item.disabled"
            :disabled-date="item.disabledDate"
          />
          <a-textarea
            v-else-if="item.type === 'textarea'"
            v-decorator="[
              item.name,
              {
                rules: item.rules,
              },
            ]"
            :placeholder="item.placeholder || `请输入${item.label}`"
            :disabled="item.disabled"
            :rows="3"
            allow-clear
          />
          <a-upload
            v-else-if="item.type === 'upload'"
            v-decorator="[item.name]"
            :multiple="true"
            :fileList="allFileList[item.name]"
            :remove="(file) => handleRemove(file, item.name)"
            :beforeUpload="(file) => beforeUpload(file, item.name)"
          >
            <a-button> <a-icon type="upload" /> 附件上传 </a-button>
          </a-upload>
        </a-form-item>
      </template>
    </a-form>
  </a-modal>
</template>
<script>
import _ from "lodash";

export default {
  props: {
    formConfig: {
      required: true,
      type: Object,
    },
    confirmLoading: Boolean,
  },
  data() {
    return {
      form: this.$form.createForm(this),
      visible: false,
      layout: { labelCol: { span: 6 }, wrapperCol: { span: 16 } },
      allFileList: {},
    };
  },
  methods: {
    handleOpenForm(obj = {}) {
      this.form.resetFields();
      this.visible = true;
      setTimeout(() => {
        // setFieldsValue参数obj的field必须在form中一一对应，否则会报错误
        let newObj = {};
        // 根据传入的filed，重新生成有值obj
        _.each(this.formConfig.items, (item) => {
          if (item.type === "upload") {
            this.allFileList[item.name] = [];
          } else {
            newObj[item.name] = obj[item.name];
          }
        });
        this.form.setFieldsValue(newObj);
      }, 100);
    },
    handleRemove(file, name) {
      const fileList = this.allFileList[name];
      const index = fileList.indexOf(file);
      const newFileList = fileList.slice();
      newFileList.splice(index, 1);
      this.allFileList[name] = newFileList;
    },
    beforeUpload(file, name) {
      const fileList = this.allFileList[name];
      fileList.push(file);
      return false;
    },
    submit() {
      this.form.validateFields((err, values) => {
        if (err) {
          return;
        }
        this.$emit("submit", values);
      });
    },
  },
};
</script>
<style lang="less" scoped></style>
